<template>
    <view class="py-select">
        <view @click="handleClick">
            <u--input v-model="currentValue" disabled disabledColor="#ffffff" :placeholder="title" border="none"
                :suffixIcon="suffixIcon"></u--input>
        </view>

        <u-action-sheet :show="actionSheetShow" :actions="data" :title="title" @close="handleClose"
            @select="handleSelect">
        </u-action-sheet>
    </view>
</template>
<script>
    export default {
        name: "PySelect",
        props: {
            // 数据数组对象
            // 对象包含name和value两个属性
            // name：显示名称；value：实际值
            data: {
                type: Array,
                default() {
                    return []
                }
            },
            // 绑定值
            value: {
                type: [String, Number],
                default: undefined
            },

            // 显示标题
            title: {
                type: String,
                default: ""
            }
        },
        data() {
            return {
                // 操作菜单是否显示
                actionSheetShow: false,

                currentValue: undefined,

                // 后缀图标
                suffixIcon: "arrow-down"
            }
        },
        created() {
            // 如果有初始值
            let value = this.value;
            if (value) {
                let data = this.data;
                for (let index = 0; index < data.length; index++) {
                    const element = data[index];
                    if (element.value && value == element.value) {
                        this.currentValue = element.name;
                        break;
                    }
                }
            }
        },
        methods: {

            // 处理点击操作
            handleClick() {
                this.actionSheetShow = true;
                this.suffixIcon = "arrow-up";
            },

            // 处理选择操作
            handleSelect(item) {
                this.currentValue = item.name;
                this.$emit("input", item.value);
                this.suffixIcon = "arrow-down";
            },

            // 处理关闭操作
            handleClose() {
                this.actionSheetShow = false;
                this.suffixIcon = "arrow-down";
            }
        },

    }
</script>
<style lang="css" scoped>
    .py-select {
        width: 100%;
    }
</style>